<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="忘记密码"
			title-color="#333" title-size="36">
			<!-- <view slot="right" class="rightTitle" @click="onLogin()">登录</view> -->
		</u-navbar>
		<view class="line"></view>
		<view class="inputView">
			<image class="inputIcon" src="/static/phone.png" mode="aspectFit"></image>
			<input placeholder="请输入11位数字手机号" placeholder-style="color: #949599;" v-model="info.phone" />
		</view>
		<view class="inputView">
			<image class="inputIcon" src="/static/code.png" mode="aspectFit"></image>
			<input placeholder="请输入验证码" placeholder-style="color: #949599;" v-model="info.smscode" />
			<text class="codeView" @tap="onGetCode()">{{smsText}}</text>
		</view>
		<view class="inputView">
			<image class="inputIcon" src="/static/pwd.png" mode="aspectFit"></image>
			<input placeholder="请输入新密码" placeholder-style="color: #949599;" password v-model="info.password" />
		</view>
		<view class="inputView">
			<image class="inputIcon" src="/static/pwd.png" mode="aspectFit"></image>
			<input placeholder="请输入确认密码" placeholder-style="color: #949599;" password v-model="info.password2" />
		</view>
		<view class="forgerView">
			<u-button shape="circle" :custom-style="customStyle" :class="{active:IsDisable == false}" :disabled="IsDisable" @tap="onGetPassword()">确认找回</u-button>
		</view>
		<view class="goLogin" @tap="onLogin()">去登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				IsDisable:true,
				info:{
					phone: '',
					smscode: '',
					password: '',
					password2: '',
				},
				timers: null,
				time: 60,
				smsText: '发送验证码',
				customStyle:{
					color:"#fff",
					backgroundColor:'#ccc',
				}
			}
		},
		watch:{
			info:{
				handler(val,oldVal){
					if(val.phone.trim() != '' && val.smscode.trim() != '' && val.password.trim() != '' &&val.password2.trim() != ''){
						this.IsDisable = false;
						this.customStyle.backgroundColor = "#01a90c"
					}else{
						this.IsDisable = true;
						this.customStyle.backgroundColor = "#ccc"
					}
				},
				deep:true
			}
		},
		methods: {
			onLogin() {
				this.$utils.jump('/pages/login/login');
			},
			onGetCode() {
				let self = this
				if (self.timers != null) {
					self.$utils.tips(self.time + 's后重新发送');
					return;
				}
				if (self.$utils.isEmpty(self.phone)) {
					self.$utils.tips('请输入手机号');
					return
				}
				self.$user.getCode({
					phone: this.phone
				}, true).then(res => {
					self.$utils.tips('短信发送成功');
					self.timers = setInterval(() => {
						self.timeout();
					}, 1000);
				});
			},
			timeout() {
				let self = this
				if (self.time == 0) {
					self.smsText = "发送验证码"
					self.time = 60
					clearInterval(self.timers);
					self.timers = null;
				} else {
					self.time--
					self.smsText = self.time + 's后重新发送'
				}
			},
			onGetPassword(){
				let self = this;
				if (self.$utils.isEmpty(self.phone)) {
					self.$utils.tips('请输入手机号');
					return
				}
				if (self.$utils.isEmpty(self.smscode)) {
					self.$utils.tips('请输入验证码');
					return
				}
				if (self.$utils.isEmpty(self.password)) {
					self.$utils.tips('请输入新密码');
					return
				}
				if (self.$utils.isEmpty(self.password2)) {
					self.$utils.tips('请输入确认密码');
					return
				}
				this.$user.passwordReset({
					phone: this.phone,
					code: this.smscode,
					password: this.password,
					password_confirmation: this.password
				}, true).then(res => {
					self.$utils.tips('重置成功！');
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				});
			}
		}
	}
</script>

<style>
	@import url('forget-login-pwd.css');

	page {
		background: #fff;
	}
</style>
